<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr/>
        <textarea placeholder="请输入要BB的内容，最多吐槽120字" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" class="setmessage" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.content">
                <div class="cmt-title">第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat("YYYY-MM-DD")}}</div>
                <div class="cmt-body">{{item.content === "undefined" ? "此用户未写评论内容·" : item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore" class="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            pageIndex:1,//默认展示第一页数据
            comments:[],//所有的评论数据
            msg:'',//评论输出的内容

        }
    },
    created(){
        this.getComments()
    },
    methods:{
        getComments(){
            this.$http.get("./json/comments.json?id="+this.id+"&pageindex="+ this.pageIndex).then(result => {
                if(result.body.status === 0){
                    this.comments = result.body.message.slice(0,this.pageIndex*3)//成功,这里是获取全部数据
                    //alert(this.comments.length)//这里是获取部分数据
                }else{
                    Toast("获取评论失败")//失败
                }
            })
        },
        getMore(){//加载更多
            this.pageIndex++
            this.getComments()
        },
        postComment(){
            //发表评论
            if(this.msg.trim().length === 0){
                return Toast('评论内容不能为空')//return之后不再执行后面的代码
            }
            var cmt={
                user_name : "匿名用户",
                add_time : Date.now(),
                content : this.msg.trim()
            }
            this.comments.unshift(cmt)
            this.msg=""
        }
    },
    props:["id"]//接收父组件的传值
}
</script>
<style lang="less" scoped>
.cmt-container{
    h3{
        font-size:14px;
    }
    textarea{font-size:12px;height:85px;margin:0;}
    .setmessage{
        margin-top:4px;
    }
    .getmore{
        margin-bottom: 4px;
    }
    .cmt-list{
        font-size:12px;
        margin:14px 0;
        .cmt-title{
            background:#ccc;
            line-height:30px;
        }
        .cmt-body{
            line-height: 35px;
            text-indent: 2em;
        }
    }
}
</style>